<template>
  <div class="container">
    <div class="header">设备实时工速</div>
    <div class="echart-container">
      <div ref="echartsBox" class="echarts-box"></div>
    </div>
  </div>
</template>
<script>
  import commomOption from './commomOption.js';
  import * as echarts from 'echarts';

  export default {
    data() {
      return {
        myChart: null,
      };
    },

    created() {
      var xData = ['数据1', '12:06', '12:07', '12:08', '12:09', '12:10'];
      const dataList = [
        [1000, 1300, 1200, 700, 600, 700],
        [700, 800, 900, 800, 700, 400],
        [400, 300, 500, 200, 200, 300],
        [300, 200, 400, 100, 400, 200],
      ];
      const series = [];
      let totalNum = 0;
      dataList.forEach((data, idx) => {
        const serie = {
          name: `data${idx}`,
          type: 'bar',
          stack: 'asset',
          barWidth: 15,
          barGap: 0.4, //柱间距离
          data: data,
        };
        if (dataList.length === idx + 1) {
          totalNum = 0;
          serie.label = {
            normal: {
              // 重写未完成label，通过计算属性重新给formatter赋值，返回
              show: true, // 计算的总数
              position: 'right',
              formatter: function (params) {
                return dataList.reduce((cur, data) => {
                  return data[params.dataIndex] + cur;
                }, 0);
              },
              textStyle: { color: '#3EFFE8' },
            },
          };
        }
        series.push(serie);
      });
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          textStyle: {
            fontWeight: 'normal',
            fontSize: '100%',
          },
        },
        grid: commomOption.grid,
        legend: commomOption.legend,
        color: [
          'rgba(21, 93, 92, 1)',
          'rgba(33, 139, 132, 1)',
          'rgba(44, 186, 172, 1)',
          'rgba(62, 255, 232, 1)',
          '#0efde1',
          '#0efd6e',
        ],
        xAxis: Object.assign({}, commomOption.yAxis, {
          type: 'value',
        }),
        yAxis: Object.assign({}, commomOption.yAxis, {
          type: 'category',
          data: xData,
        }),
        series: series,
      };
      this.echartInit(option);
    },

    methods: {
      // echarts初始化
      echartInit(option) {
        if (this.myChart) {
          this.myChart.setOption(option);
          return false;
        }

        this.$nextTick(() => {
          this.myChart = echarts.init(this.$refs.echartsBox);

          option && this.myChart.setOption(option);
          // 根据页面大小自动响应图表大小
          window.addEventListener('resize', () => {
            this.myChart.resize();
          });
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .container {
    position: relative;
    flex: 1;
    background: url(../image/block_bg_1.png) 0px 0px no-repeat;
    background-size: 100% 100%;
    width: 100%;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;
    &:nth-last-child(1) {
      padding-bottom: 0px;
    }

    .header {
      font-size: 20px;
      font-family: 'Microsoft YaHei';
      color: rgb(255, 255, 255);
      font-weight: bold;
      text-shadow: 0px 0px 10px rgba(5, 28, 67, 0.004);
      padding-top: 8%;
      padding-bottom: 5.1%;
      padding-left: 9%;
      background: linear-gradient(180deg, #ffffff 77%, #005df1 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .echart-container {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .echarts-box {
      width: 100%;
      min-height: 500px;
      height: 100%;
    }
  }
</style>
